<template>
    <div id="app01">
      <h1>v-for 遍历集合</h1>
      <div v-for="(v,i) in arr" :key='i'>
            {{i}} --->{{v}}
      </div>

      <hr>
      <h1>v-for 遍历集合对象</h1>
      <div v-for="(v1,i) in Student" :key='i'>
            {{i}} ---->{{v1}}
      </div>
       <hr>
      <h1>v-for 遍历集合对象</h1>
      <div v-for="(v1,i) in Student" :key='i'>
            {{i}} ---->{{v1.name}} ---> {{v1.age}}
      </div>
      <hr>
       <h1>v-for 遍历集合对象</h1>
       <div>
        <table border="1">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="(n,i) in Student" :key="i"> <!--in和of是一样的-->
                <td>{{i ++}}</td>
                <td>{{n.name}}</td>
                <td>{{n.age}}</td>
            </tr>
        </table>
       </div>
    </div>   
</template>

<script>
export default{
    name:"F",
    data(){
        return {
            arr:[12, 2, 20, 23, 100],
            Student:[
                {name: "hongyi01", age:12},
                {name: "hongyi02", age:13},
                {name: "hongyi03", age:14},
            ]
        }
    },
    methods: {
        
    },
}
</script>

<style>
#app01{
    background-color: pink;
}
</style>